<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人脸识别</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link href="__CSSN__/style.css" rel="stylesheet" type="text/css">
    <!-- 	<link rel="stylesheet" href="lib/helang-mobile.css"> -->
    <link rel="stylesheet" href="__CSSN__/index.css?t=2">
    <style type="text/css"></style>
</head>
<body style="">
<section class="jq22-flexView">
    <header class="jq22-navBar jq22-navBar-fixed b-line">
        <a href="javascript:;" class="jq22-navBar-item">
<!--            <i class="icon icon-return"></i>-->
        </a>
        <div class="jq22-center">
            <span class="jq22-center-title">在线报名</span>
        </div>
        <a href="javascript:;" class="jq22-navBar-item">
            <i class="icon icon-sys"></i>
        </a>
    </header>
    <section class="jq22-scrollView">
        <div class="jq22-auto-img">
            <img src="__IMAGESN__/head.png" alt="">
        </div>
        <div class="jq22-auto-form">
            <div class="jq22-auto-box">
                <div class="jq22-palace">
                    <a href="javascript:;" class="jq22-palace-grid">
                        <div class="jq22-palace-grid-icon">
                            <img src="__IMAGESN__/item-001.png" alt="">
                        </div>
                        <div class="jq22-palace-grid-text">
                            <h2>在线申请</h2>
                        </div>
                    </a>
                    <a href="javascript:;" class="jq22-palace-grid">
                        <div class="jq22-palace-grid-icon">
                            <img src="__IMAGESN__/item-002.png" alt="">
                        </div>
                        <div class="jq22-palace-grid-text">
                            <h2>核验留资</h2>
                        </div>
                    </a>
                    <a href="javascript:;" class="jq22-palace-grid">
                        <div class="jq22-palace-grid-icon">
                            <img src="__IMAGESN__/item-003.png" alt="">
                        </div>
                        <div class="jq22-palace-grid-text">
                            <h2>到达会场</h2>
                        </div>
                    </a>
                    <a href="javascript:;" class="jq22-palace-grid">
                        <div class="jq22-palace-grid-icon">
                            <img src="__IMAGESN__/item-004.png" alt="">
                        </div>
                        <div class="jq22-palace-grid-text">
                            <h2>身份验证</h2>
                        </div>
                    </a>
                </div>
                <form action="" id="form1" class="jq22-auto-inp" method="post" onsubmit="return false;">
                    <div class="jq22-flex">
                        <label>姓名</label>
                        <div class="jq22-flex-box">
                            <input type="text" name="username" value="{$info.username}" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="jq22-flex">
                        <label>身份证号</label>
                        <div class="jq22-flex-box">
                            <input type="text" name="card_num" value="{$info.card_num}" placeholder="请输入身份证号">
                        </div>
                    </div>
                    <div class="jq22-flex">
                        <label>年龄</label>
                        <div class="jq22-flex-box">
                            <input type="number" name="age" value="{$info.age}" placeholder="请输入年龄">
                        </div>
                    </div>
                    <div class="jq22-flex">
                        <label>企业名称</label>
                        <div class="jq22-flex-box">
                            <input type="text" name="com_name" value="{$info.com_name}" placeholder="请输入您的企业名称">
                        </div>
                    </div>
                    <div class="jq22-flex">
                        <label>联系电话</label>
                        <div class="jq22-flex-box">
                            <input type="number" name="mobile" value="{$info.mobile}" placeholder="请输入您的联系电话">
                        </div>
                    </div>
                    <div class="jq22-flex">
                        <label>同行人数</label>
                        <div class="jq22-flex-box">
                            <input type="number" name="renshu" value="{$info.renshu}" placeholder="请输入您的同行人数">
                        </div>
                    </div>






                    <label class="select_file flex_col flex_center">
                        <div>
                            <div id="pickerFile" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></div>
                            <div class="color_999 jq22-apply-btn"   style="width: 30%; height: 1.8rem;line-height: 1.8rem;    font-size: .8rem;   text-align: center;  margin-bottom: 0.5rem;">点击拍照</div>
                            <input type="file"  capture="camera" style="display: none" id="preview-file" name="file" accept="image/*" style="opacity: 0">
                        </div>
                    </label>

                    <input type="hidden" name="id" value="{$info.id}">
                    <div style="padding: 0 0.2rem;">
<!--                        <div class="t1">图片预览：</div>-->
                        <div class="b1">
                            <img src="<?=$info['head_pic']?'/'.$info['head_pic']:'__IMAGESN__/user.jpg'?>" id="preview-img">
                        </div>
                    </div>
                    <input type="hidden" name="head_pic" value="{$info.head_pic}" >

                    <button class="jq22-apply-btn" onclick="binding()"><?=$info?'修改信息':'立即报名'?></button>
                    <p style="    margin-top: 19px;font-size: 1rem;">已报名，<a style="color: #f47936;" href="{:url('index/searchUser')}">查询</a>报名信息</p>
                </form>
            </div>
        </div>
    </section>
</section>

<script src="__JSN__/jquery.min.js"></script>

<script type="text/javascript" src="__STATICN__/layer_mobile/layer.js"></script>
<script>
    sub = true;
    /**
     * 提交表单
     */
    function binding(){
        if(!sub){
           return false;
        }
        sub = false;
        var i = layer.open({
            type: 2
            ,content: '提交中'
        });
        $.ajax({
            url:"{:url('index/sub')}",
            dataType:'json',
            type:'POST',
            async: true,
            data: $("#form1").serialize(),
            success: function(data){
                layer.close(i)
                if (data.error_code < 1) {
                    // layer.open({
                    //     content: '报名成功'
                    //     ,skin: 'msg'
                    //     ,time: 1 //2秒后自动关闭
                    // });
                    $(".jq22-apply-btn").hide();
                    alert('报名成功')


                }else{
                    alert(data.error_msg)
                    //提示
                    // layer.open({
                    //     content: '移动版和PC版不能同时存在同一页面'
                    //     ,btn: '我知道了'
                    // });

                }
                sub = true
                // setTimeout(function (){
                //     layer.close(i)
                //
                // }, 3000 )

            },
            error:function(response){
                sub = true
                layer.close(i)
            },
            complete:function(){{
                sub = true
                layer.close(i)
            }}
        });
    }
    /**
     * 上传图片
     */
    $("#preview-file").change(function(){
        var i = layer.open({
            type: 2
            ,content: '识别中'
        });
        var formData = new FormData();


        formData.append("img",$('#preview-file')[0].files[0]);

        $.ajax({
            url:"{:url('index/uploads')}",
            dataType:'json',
            type:'POST',
            async: true,
            data: formData,
            processData : false, // 使数据不做处理
            contentType : false, // 不要设置Content-Type请求头
            success: function(data){
                if (data.error_code < 1) {
                    $("#preview-img").attr('src',data.url)
                    $("input[name='head_pic']").val(data.url);
                    setTimeout(function (){
                        layer.close(i)
                        layer.open({
                            content: '识别成功'
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭

                        });
                    }, 3000 )


                }else{
                    layer.open({
                        content: data.error_msg
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                        ,success:function (){

                            layer.close(i)
                        }
                    });
                }

            },
            error:function(response){
                console.log(response);
                layer.closeAll()
            }
        });
    })
</script>
</body>
</html>

